<template>
  <div class="playbrowser-container">
    <div class="header">
      <h2>浏览器任务控制台</h2>
    </div>
    <div class="task-control">
      <el-input
        v-model="taskInput"
        placeholder="请输入浏览器任务指令"
        :disabled="isTaskRunning"
        @keyup.enter.native="executeTask"
      ></el-input>
      <el-button 
        type="primary" 
        @click="executeTask"
        :loading="isTaskRunning"
        :disabled="isTaskRunning"
      >
        执行任务
      </el-button>
    </div>
    <div class="output-container">
      <el-card class="output-card">
        <div slot="header">
          <span>任务执行结果</span>
        </div>
        <div class="output-content" v-html="taskOutput"></div>
        <div class="progress-container" v-if="isTaskRunning">
          <el-progress 
            :percentage="taskProgress" 
            :status="taskStatus === 'failed' ? 'exception' : ''"
            :text-inside="true"
            :stroke-width="20"
          />
          <div class="status-message">{{ statusMessage }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 移除这行
// import io from 'socket.io-client'

export default {
  data() {
    return {
      taskInput: '',
      taskOutput: '等待任务执行...',
      isTaskRunning: false,
      taskProgress: 0,
      statusMessage: '',
      taskStatus: '',
      socket: null  // 移除这个属性
    }
  },
  methods: {
    // 移除整个connectWebSocket方法
    executeTask() {
      if (!this.taskInput.trim()) {
        this.$message.warning('请输入有效的任务指令')
        return
      }

      this.isTaskRunning = true
      this.taskOutput = '任务执行中，请稍候...'
      this.taskProgress = 0
      this.statusMessage = '正在连接服务器...'
      this.taskStatus = ''

      const eventSource = new EventSource(`/base/smart/playbrowser/sse?task=${encodeURIComponent(this.taskInput)}`)
      
      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data)
        if (data.error) {
          this.taskOutput = `错误: ${data.error}`
          this.taskStatus = 'failed'
          this.isTaskRunning = false
          eventSource.close()
          return
        }

        this.taskProgress = data.progress || 0
        this.statusMessage = data.message || ''
        this.taskOutput += `<br/>${data.message}`

        if (data.result) {
          this.taskOutput += `<br/><br/>任务结果:<br/>${data.result}`
          this.isTaskRunning = false
          eventSource.close()
        }
      }

      eventSource.onerror = () => {
        this.taskOutput = 'SSE连接错误'
        this.taskStatus = 'failed'
        this.isTaskRunning = false
        eventSource.close()
      }
    }
  },
  mounted() {
    // 移除this.connectWebSocket()调用
  },
  beforeDestroy() {
    // 移除整个if块
    if (this.socket) {
      this.socket.disconnect()
    }
  }
}
</script>

<style scoped>
.playbrowser-container {
  padding: 20px;
}
.task-control {
  display: flex;
  margin-bottom: 20px;
}
.task-control .el-input {
  margin-right: 10px;
}
.output-container {
  margin-top: 20px;
}
.output-content {
  min-height: 200px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.progress-container {
  margin: 20px 0;
}
.status-message {
  margin-top: 10px;
  text-align: center;
  color: #666;
}
</style>